<template>
	<view class="chat-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @tap="goBack">
				<image src="../../static/public/left_arrow.png" mode="heightFix"></image>
			</view>
			<view class="header-title">张三123</view>
			<view class="header-right">
				<image src="../../static/public/dot.png" mode="widthFix"></image>
			</view>
		</view>

		<!-- 聊天消息区域 -->
		<scroll-view :scroll-y="true" :scroll-into-view="scrollIntoViewId" :scroll-top="scroll" class="chat-messages"
			@click="showBottomActions=false">
			<view v-for="(message, index) in messages" :key="index" :class="['message', message.type]"
				:id="'message-' + index">
				<image v-if="message.type === 'left'" class="avatar" :src="message.avatar" mode="aspectFill"></image>
				<view v-if="!message.isImage && !message.isVoice && !message.isLocation" class="content">
					{{ message.content }}
				</view>
				<image v-if="message.isImage" class="image-content" :src="message.content" mode="widthFix"></image>
				<view v-if="message.isLocation" class="location-message" @tap="openMap(message.location)">
					<image src="../../static/tabBar/map-dark.png" class="location-icon"></image>
					查看位置
				</view>
				<image v-if="message.type === 'right'" class="avatar" :src="userAvatar" mode="aspectFill"></image>
			</view>
			<view id="bottom" class="timestamp">{{ currentTime }}</view>
		</scroll-view>

		<!-- 输入区域 -->
		<view class="input-content" :style="{ bottom: keyboardHeight + 'px' }">
			<view class="input-area">
				<image src="../../static/message/detail/microphone.png" mode="heightFix"></image>
				<view class="input-box">
					<input type="text" placeholder="想跟TA说点什么..." :adjust-position="false" v-model="inputMessage"
						@confirm="sendMessage" @click="showBottomActions = false;" />
				</view>
				<image src="../../static/message/detail/smiley.png" mode="heightFix"></image>
				<image src="../../static/public/add.png" mode="heightFix" @tap="toggleBottomActions"></image>
			</view>

			<!-- 底部功能按钮（点击加号后显示） -->
			<view class="bottom-actions" v-show="showBottomActions">
				<view class="action-item" @tap="chooseImage">
					<view class="action-icon">
						<image class="image" src="../../static/message/detail/Image.png"></image>
					</view>
					图片
				</view>
				<view class="action-item" @tap="takePhoto">
					<view class="action-icon">
						<image class="image" src="../../static/message/detail/camera.png"></image>
					</view>
					拍摄
				</view>
				<view class="action-item" @tap="sendLocation">
					<view class="action-icon">
						<image class="image" src="../../static/message/detail/positioning.png"></image>
					</view>
					定位
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messages: [{
						type: 'left',
						content: '请帮忙改下地址谢谢',
						avatar: '../../static/message/detail/avatar.png'
					},
					{
						type: 'right',
						content: '请将新地址和微信交易记录截图提供一下',
						avatar: '../../static/message/detail/avatar.png'
					},
					{
						type: 'left',
						content: '上海市浦东新区商城路800号斯米克大厦 1916前台',
						avatar: '../../static/message/detail/avatar.png'
					},
					{
						type: 'right',
						content: '好的，收到 我去联系顺丰客服',
						avatar: '../../static/message/detail/avatar.png'
					},
					{
						type: 'left',
						content: '地址改好了吗',
						avatar: '../../static/message/detail/avatar.png'
					},
					{
						type: 'right',
						content: '已经改好了亲',
						avatar: '../../static/message/detail/avatar.png'
					},
				],
				keyboardHeight: 0, // 保存键盘高度
				showBottomActions: false,
				scroll: 0,
				inputMessage: '',
				currentTime: '12:15',
				showBottomActions: false,
				userAvatar: "",
				scrollIntoViewId: "",
			};
		},
		onLoad() {
			this.storedData = uni.getStorageSync('user');
			this.userAvatar = this.storedData.avatar;
			uni.onKeyboardHeightChange((event) => {
				this.keyboardHeight = event.height;
			});
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			sendMessage() {
				if (this.inputMessage.trim()) {
					this.messages.push({
						type: 'right',
						content: this.inputMessage,
						avatar: '',
						isImage: false,
						isVoice: false,
						isLocation: false,
					});
					this.inputMessage = '';
				}
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: (res) => {
						this.messages.push({
							type: 'right',
							content: res.tempFilePaths[0],
							avatar: '',
							isImage: true
						});
						this.showBottomActions = false;
					}
				});
			},
			takePhoto() {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success: (res) => {
						this.messages.push({
							type: 'right',
							content: res.tempFilePaths[0],
							avatar: '',
							isImage: true
						});
						this.showBottomActions = false;
					}
				});
			},
			sendLocation() {
				uni.chooseLocation({
					success: (res) => {
						const location = {
							latitude: res.latitude,
							longitude: res.longitude,
							address: res.address,
							name: res.name // 获取地址名称
						};
						this.messages.push({
							type: 'right',
							content: `当前位置: ${location.name}`, // 使用地址名称
							location: location,
							avatar: '',
							isLocation: true
						});
					}
				});
			},
			toggleBottomActions() {
				this.showBottomActions = !this.showBottomActions; // 切换底部功能区显示状态
			},
			openMap(location) {
				uni.openLocation({
					latitude: location.latitude,
					longitude: location.longitude,
					name: location.name || '位置', // 添加名称，若没有则显示“位置”
					address: location.address || '位置',
					scale: 18
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.voice-message {
		background-color: #F9943C;
		color: white;
		padding: 1vh;
		border-radius: 0.5vh;
		font-size: 1.2vh;
		margin-right: 1vh;
		cursor: pointer;
	}

	.location-message {
		background-color: #F4F3F2;
		padding: 1vh;
		border-radius: 0.5vh;
		font-size: 1.2vh;
		margin-right: 1vh;
		cursor: pointer;
		display: flex;
		align-items: center;
	}

	.location-icon {
		width: 2vh;
		height: 2vh;
		margin-right: 0.5vh;
	}

	.chat-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #fff;
	}

	.header {
		display: flex;
		position: sticky;
		align-items: center;
		padding: 1vh 1.5vh;
		background-color: #ffffff;
		top: 5vw;
		padding-top: 3vh;
		z-index: 10000;
		border-bottom: 1px solid #e5e5e5;
	}

	.header-left,
	.header-right {
		width: 2.5vh;

		image {
			height: 1.4vh;
		}
	}

	.header-right {
		image {
			width: 2vh;
		}
	}

	.header-title {
		flex: 1;
		text-align: center;
		font-size: 2vh;
		font-weight: bold;
	}

	#bottom {
		padding-bottom: 8vh;
	}

	.chat-messages {
		flex: 1;
		width: 97%;
		margin: 7vw auto;
		overflow-y: scroll;
	}

	.message {
		display: flex;
		margin: 1vh 0;
	}

	.left {
		justify-content: flex-start;
	}

	.right {
		justify-content: flex-end;
	}

	.avatar {
		width: 4.5vh;
		height: 4.5vh;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.input-content {
		position: fixed;
		bottom: 1vh;
		width: 100vw;
		padding-bottom: 1vh;
		background-color: #fff;
	}

	.content {
		max-width: 70%;
		padding: 1vh;
		border-radius: 0.5vh;
		word-break: break-word;
	}

	.left .content {
		background-color: #F4F3F2;
		margin-left: 1vh;
	}

	.right .content {
		background-color: #F9943C;
		color: white;
		margin-right: 1vh;
	}

	.image-content {
		max-width: 15vh;
		border-radius: 0.8vh;
		object-fit: cover;
		margin-right: 1vh;
	}

	.timestamp {
		text-align: center;
		color: #999;
		font-size: 1.2vh;
		margin: 1.5vh 0;
	}

	.input-area {
		background-color: #fff;
		border-top: 0.1vh solid #eaeaea;
		width: 95vw;
		display: flex;
		margin: 0 auto;
		align-items: center;
		flex-direction: row;

		image {
			height: 3vh;
			margin: 0 0.5vh;
		}
	}

	.input-box {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		border-radius: 2vh;
		border: 0.1vh solid #e0e0e0;
		margin: 1vh auto;
		width: 70%;
		height: 4vh;
	}

	.input-box input {
		flex: 1;
		height: 4vh;
		margin: 0 1vh;
		font-size: 1.6vh;
	}

	.bottom-actions {
		display: flex;
		justify-content: flex-start;
		padding-top: 1.5vh;
		height: 25vh;
		background-color: #fff;
		padding-bottom: 1vh;

		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-left: 7vw;
			font-size: 3.8vw;
			color: #121212;
			.action-icon {
				border-radius: 1vh;
				display: flex;
				justify-content: center;
				align-items: center;
				.image {
					width: 15vw;
					height: 15vw;
					margin-bottom: 1vw;
				}
			}
		}
	}





	.action-item text {
		font-size: 1.2vh;
		color: #666;
		margin-top: 0.5vh;
	}
</style>